<template>
  <transition name="slide">
    <div :class="['message-container',  `message-${type}`]" v-if="visible">
      <i :class="['iconfont',`icon-${type}`]" class="icon" aria-hidden="true"> </i>
      <span>
        <span v-if="msg">{{msg}}</span>
        <span v-else><slot></slot></span>
      </span>
      <span @click="closeMySelf">x</span>
    </div>
  </transition>
</template>

<script>
import './style/iconfont.css';

export default {
  name: 'mes2',
  props: {
    msg: {
      type: String,
      default: '这是一个弹窗!',
    },
    delay: {
      type: Number,
      default: 500,
    },
    type: {
      type: String,
      default: 'info',
    },
    visible: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    closeMySelf() {
      this.$emit('update:visible', false);
    },
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        setTimeout(() => {
          this.$emit('update:visible', false);
        }, this.delay);
      }
    },
  },
};
</script>

<style scoped lang="scss">
  $info: #abdcff;
  $info-background: #f0faff;
  $success: #8ce6b0;
  $success-background: #edfff3;
  $warning: #ffd77a;
  $warning-background: #fff9e6;
  $error: #ffb08f;
  $error-background: #ffefe6;
  $font-color: #515a6e;
  .message-container{
    user-select: none;
    width: 280px;
    line-height: 34px;
    font-size: 12px;
    border-radius: 4px;
    position: absolute;
    z-index: 999;
    left: -280px;
    transform: translate(280px, 10px);
    margin: auto;
    text-indent: 1em;
    word-spacing: 10px;
    span,i{
      vertical-align: middle;
      width: 30%;
    }
  }
  .slide-enter, .slide-leave-to {
    transform: translate(0, 10px);
  }
  .slide-enter-active, .slide-leave-active {
    transition: all 3s ease-in-out;
  }
  .slide-enter-to, .slide-leave {
    transform: translate(280px, 10px);
  }
  $type: (
    error:(background: $error-background, borderColor: $error, color: $error),
    success:(background: $success-background, borderColor: $success, color: $success),
    warning:(background: $warning-background, borderColor: $warning, color: $warning),
    info:(background: $info-background, borderColor: $info, color: $info),
  );
  @each $m in map_keys($type) {
    .message-#{$m} {
      background-color: map_get(map_get($type, $m), background);
      color: map_get(map_get($type, $m), color);
    }
  }
</style>
